<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单组件</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
</head>
<body>
    <div id="div">
        <!-- 
            
            
            TODO:
                1.:model="ruleForm" : 全称写法：v-bind:model="ruleForm" 给当前el-form 标签绑定一个model属性
                2.:rules="rules" ：给el-form 标签绑定一个rules属性，属性值rules是下面脚本中data中的key,存放校验规则的。

                        rules: {
                                name: [
                                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                                ],
                                .....
                            }
         -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!-- 
                TODO:
                    3.label="活动名称" : 表示当前表单项的提示信息
                    4.prop="name" ：并将 Form-Item 的 prop 属性设置为需校验的字段名即可
                        就是prop的属性值name是下面脚本中data中rules中的key:
                             rules: {
                                name: [
                                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                                ],
                                .....
                            }
             -->
            <el-form-item label="活动名称" prop="name">
                <!-- 
                    TODO:
                        5.v-model="ruleForm.name" : 双向数据绑定。就是视图改变，数据改变。数据改变，视图改变。
                        绑定的是下面vue脚本中data中的ruleForm：
                            数据
                            ruleForm: {
                                name: '',
                                region: '',
                                date1: '',
                                date2: '',
                                delivery: false,
                                type: [],
                                resource: '',
                                desc: ''
                        },
                 -->
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
              <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
                 <!-- 
                TODO:
                    6.@click="submitForm('ruleForm')" : 全称写法是：v-on:click="submitForm('ruleForm')" 给当前按钮绑定一个
                    单击事件表示提交表单，也就是说如果点击立即创建按钮就会调用下面脚本中的submitForm函数，参数ruleForm代表上述整个表单
               -->
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <!-- 
                TODO:
                    7.@click="resetForm('ruleForm')" : 全称写法是：v-on:click="resetForm('ruleForm')" 给当前按钮绑定一个
                    单击事件表示重置表单
               -->
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
    </div>
</body>
<script>
    // 脚本
    new Vue({
        // 挂载的视图
        el:"#div",
        //数据
        // data:{
            // username:"锁哥"
        // }
        data() {
                return {
                        ruleForm: {
                            name: '',
                            region: '',
                            date1: '',
                            date2: '',
                            delivery: false,
                            type: [],
                            resource: '',
                            desc: ''
                        },
                        rules: {
                                // 针对活动名称的校验规则
                                name: [
                                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                                ],
                                region: [
                                    { required: true, message: '请选择活动区域', trigger: 'change' }
                                ],
                                date1: [
                                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                                ],
                                date2: [
                                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                                ],
                                type: [
                                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                                ],
                                resource: [
                                    { required: true, message: '请选择活动资源', trigger: 'change' }
                                ],
                                desc: [
                                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                                ]
                            }
                    };
                },
        methods: {
        submitForm(formName) {//formName=ruleForm 表示整个form表单
            //下面是element的固定写法用来校验，如果表单整体校验通过那么可以提交表单，如果表单校验失败，那么阻止表单提交
            this.$refs[formName].validate((valid) => {
                // valid 的值如果是true，校验通过，可以提交表单，值是false，校验失败，阻止表单提交
            if (valid) {
                alert('submit!');
                //可以提交表单，默认是return true;
                return true;
            } else {
                console.log('error submit!!');
                //阻止表单提交
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
        }
    });
</script>

</html>